<template>
   <div class="container">
      <a-modal
              v-model:visible="visible"
              v-model:draggable="draggable"
              :title="title"
              @cancel="handleCancel"
              @before-ok="onBeforeOk"
      >
         <a-form
                 ref="formRef"
                 :label-col-props="{ span: 7 }"
                 :wrapper-col-props="{ span: 17 }"
                 :model="formData"
                 class="form"
         >
            <a-spin dot :loading="loading">
               <#list columnRows as columnRow>
                  <#if columnRow.whetherAddUpdate?? && columnRow.whetherAddUpdate=="Y">
                        <a-form-item field="${columnRow.fieldName}" label="${columnRow.fieldRemark}"
                           <#if columnRow.whetherRequired?? && columnRow.whetherRequired=="Y"> :validate-trigger="['change', 'input']"
                           :rules="[{required: true,message: '请输入${columnRow.fieldRemark}'}]"><#else>></#if>
                           <#if columnRow.effectType=="INPUT">
                                 <a-input v-model="formData.${columnRow.fieldName}" placeholder="请输入${columnRow.fieldRemark}"/>
                           <#elseif columnRow.effectType=="INPUT_NUMBER">
                                 <a-input-number  v-model="formData.${columnRow.fieldName}" placeholder="请输入${columnRow.fieldRemark}">
                              <#elseif columnRow.effectType=="INPUT_TAG">
                                 <a-input-tag  placeholder="请输入${columnRow.fieldRemark}"  v-model="formData.${columnRow.fieldName}" allow-clear/>
                              <#elseif columnRow.effectType=="SELECT">
                                 <a-select :style="{width:'320px'}" v-model="formData.${columnRow.fieldName}" placeholder="请输入${columnRow.fieldRemark} ...">
                                    <a-option>Beijing</a-option>
                                    <a-option>Shanghai</a-option>
                                    <a-option>Guangzhou</a-option>
                                    <a-option disabled>Disabled</a-option>
                                 </a-select>
                              <#elseif columnRow.effectType=="DATEPICKER_YMD">
                                 <a-date-picker style="width: 200px;" v-model="formData.${columnRow.fieldName}" allow-clear/>
                              <#elseif columnRow.effectType=="DATEPICKER_YMD_HMS">
                                 <a-date-picker style="width: 200px;" v-model="formData.${columnRow.fieldName}"   format="YYYY-MM-DD HH:mm:ss" allow-clear/>
                              <#elseif columnRow.effectType=="DATEPICKER_YMD_RANGE">
                                 <a-range-picker style="width: 200px;" v-model="formData.${columnRow.fieldName}" show-time format="YYYY-MM-DD"  allow-clear/>
                              <#elseif columnRow.effectType=="TEXTAREA">
                                 <a-textarea v-model="formData.${columnRow.fieldName}" placeholder="请输入${columnRow.fieldRemark}"/>
                              <#else>
                                 <a-input v-model="formData.${columnRow.fieldName}" placeholder="请输入${columnRow.fieldRemark}"/>
                              </#if>
                        </a-form-item>
                      </#if>
                   </#list>
            </a-spin>
         </a-form>
      </a-modal>
   </div>
</template>

<script lang="ts">
   import {defineComponent, ref, watch} from 'vue';
   import {FormInstance} from '@arco-design/web-vue/es/form';
   import useLoading from '@/hooks/loading';
   import {useI18n} from 'vue-i18n';
   import {addForm, detail, editForm} from '@/api/${busName}';
   import {Message} from '@arco-design/web-vue';

   const formModel = () => {
      return {
         <#list columnRows as columnRow>
         <#if columnRow.whetherAddUpdate?? && columnRow.whetherAddUpdate=="Y">
         <#if columnRow.fieldJavaType?? && columnRow.fieldJavaType=="String">
         ${columnRow.fieldName}:null,
         <#elseif columnRow.fieldJavaType?? && columnRow.fieldJavaType=="Integer" ||  columnRow.fieldJavaType=="Long" ||  columnRow.fieldJavaType=="Double">
         ${columnRow.fieldName}:0,
         <#else>
         ${columnRow.fieldName}:null,
         </#if>
         </#if>
         </#list>
         }
   };

   export default defineComponent({
      setup(props, context) {
         const { t } = useI18n();
         const formData = ref(formModel());
         const formRef = ref<FormInstance>();
         const { setLoading } = useLoading();
         const operate = ref<number>();
         const isNew = ref<boolean>(false);
         const onBeforeOk = async (done: (arg: boolean) => void) => {
            const res = await formRef.value?.validate();
            if (!res) {
               try {
                  setLoading(true);
                  if (isNew.value) {
                     await addForm(formData.value);
                  } else {
                     await editForm(formData.value);
                  }
                  Message.success(t('request.ok'));
                  context.emit('ok');
               } catch (e) {
                  return done(false);
               } finally {
                  setLoading(false);
               }
            }
            return done(!res);
         };

         const reset = async () => {
            formData.value = formModel();
            await formRef.value?.resetFields();
         };
         return {
            formRef,
            reset,
            operate,
            formData,
            isNew,
            formModel,
            t,
            onBeforeOk,
         };
      },
      data() {
         return {
            visible: false,
            draggable: true,
            title: '',
            loading: false,
         };
      },
      methods: {
         addForm() {
            this.reset();
            this.visible = true;
            this.isNew = true;
            this.title = '新增菜单';
         },
         async editForm(id: string) {
            await this.reset();
            this.visible = true;
            this.isNew = false;
            this.title = '编辑菜单';
            const {data} = await detail(id);
            this.formData = data
         },
         setLoading(loading: boolean) {
            this.loading = loading;
         },
         handleCancel() {
            this.reset();
            this.visible = false;
            this.isNew = true;
         },
      },
   });
</script>

<style scoped lang="less">
   .container {
      padding: 20px;
   }

   .form {
      width: 420px;
   }
</style>
